<template>
    <div id="video" ref="videoRef" class="video-container">
        <div id='danmaku'></div>
    </div>
    <el-input @keyup.enter="sendDanMaku"    placeholder="请输入内容" v-model="state.from.danmakuContent" class="input-with-select">
        <template v-slot:append>
            <el-button @click="sendDanMaku" icon="el-icon-s-promotion">发送</el-button>
        </template>
    </el-input>
</template>

<script setup>
import io from 'socket.io-client'
import DPlayer from 'dplayer'
import Hls from 'hls.js'
import { ref, reactive, onMounted, watch } from 'vue'
import EasyDanMaku from '../js/EasyDanmaku'
import { Message } from 'element3'
const props = defineProps({
    anchorNo: {
        type: String,
        default: 'xiaotao'
    },
    webSocketUrl: {
        type: String,
        default: ''
    }
})
// eslint-disable-next-line no-unused-vars
const emit = defineEmits([
    'send',
    'peopleNum'
])
const state = reactive({
    socket: null,
    dPlayer: null,
    danmaku: null,
    from: { danmakuContent: '' },
    danmakuData: []
})

// 定义视频HTMLDOM对象
const videoRef = ref()
// 定义发送弹幕方法
const sendDanMaku = () => {
    console.log(state.from.danmakuContent)
    if (state.from.danmakuContent == '') {
        Message({
            message: '请输入内容后在发送哦~',
            type: 'error'
        })
        return
    }
    // 弹幕内容, 弹幕样式, 回调函数
    state.danmaku.send(state.from.danmakuContent, 'danmaku-wrapper-sender')
    state.socket.emit('message', { danmakuContent: state.from.danmakuContent, room: props.anchorNo })
    state.danmakuData.push(state.from.danmakuContent)
    emit('send', state.from.danmakuContent)
    // Message({
    //     message: '弹幕发送成功！',
    //     type: 'success'
    // })
    state.from.danmakuContent = ''
}
// 定义初始化函数
const init = () => {
    state.dPlayer = new DPlayer({
        container: videoRef.value,
        live: true,
        autoplay: true, // 是否自动播放
        lang: 'zh-cn', // 设置中文
        mutex: false,
        // danmaku: true,
        // apiBackend: {
        //     read: function(endpoint, callback) {
        //         console.log('Pretend to connect WebSocket')
        //         console.log(endpoint.success())
        //     },
        //     send: function(endpoint, danmakuData, callback) {
        //         console.log('Pretend to send danmaku via WebSocket', danmakuData)
        //     }
        // },
        video: {
            type: 'customHls',
            customType: {
                customHls: function(video, player) {
                    const hls = new Hls()
                    hls.loadSource(`https://live.xiaotao2333.top:344/${props.anchorNo}.m3u8`)
                    hls.attachMedia(video)
                }
            }
        }
    })
    const initDanmaku = () => {
        state.danmaku = new EasyDanMaku({
            el: '#video', // 弹幕挂载节点
            colourful: true, // 彩色弹幕
            line: 8, // 弹幕行数
            wrapperStyle: 'danmaku-wrapper', // 默认弹幕样式
            speed: 12, // 弹幕播放速度
            runtime: 3, // 播放一次的时常
            loop: false, // 开启循环播放
            hover: false, // 鼠标移入悬停
            coefficient: 0.1,
            onComplete: () => { // 播放结束
            }
        })
        // 建立socket.io通信
        state.socket = io.connect(props.webSocketUrl)
        state.socket.emit('sys', { anchorNo: props.anchorNo })
        // 监听当前直播间的消息
        state.socket.on('message', (message) => {
            console.log(message)
            if (message?.danmakuContent) {
            // 弹幕内容, 弹幕样式, 回调函数
                state.danmaku.send(message.danmakuContent, 'danmaku-wrapper')
                state.danmakuData.push(message.danmakuContent)
                emit('send', message.danmakuContent)
            }
            if (message?.peopleNum) {
                emit('peopleNum', message.peopleNum)
            }
        })
    }
    initDanmaku()
    // state.dPlayer.on('canplay', function() {

    // })
}
onMounted(() => {
})
watch(
    () => props.anchorNo,
    (newValue, oldValue) => {
        init()
    }
)
</script>

<style lang="scss">
.danmaku-wrapper{
    text-shadow: -1px -1px white,1px 1px #333;    /*深灰边*/
    font-size: 25px;
    font-family: 'Wawati SC';
    margin: 10px;
}
#video{
    width: 100%;
    height: 100%;
    background-image: url(/imgs/live-bg.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 90%;
    background-color: #333;
}
.danmaku-wrapper-sender {
    text-shadow: -1px -1px white,1px 1px #333;    /*深灰边*/
    font-size: 25px;
    font-family: 'Wawati SC';
    box-shadow: rgb(17, 0, 255) 0px 1px 4px, rgb(0, 57, 243) 0px 0px 0px 3px;
    line-height: normal !important;
}
</style>
